import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

/* Composition VS Inheritance */
/* 组合 VS 继承 */
// React用组合代替继承实现组件间的代码复用
// 如果要在组件间复用非UI的功能, 可以将其提取为一个单独的JS模块, 如函数、对象或者类. 组件可以直接引入(import), 无需通过extends继承它们

// 有些组件无法提前知晓他们子组件的具体内容, 这时候可以用一个特殊的children prop来将他们的子组件传递到渲染结果中  
// children可以自定义名称, 参考使用方法和结构
// 少数情况下, 你可能需要在一个组件中预留出几个“洞”. 这种情况下, 我们可以自行约定, 将所需内容传入props, 并使用相应的prop。
function FancyBorder(props) {
    return (
        <div className={'FancyBorder FancyBorder-' + props.color}>
            {/* // WelcomeDialog中<FancyBorder>JSX标签中的所有内容都会作为一个children prop传递给FancyBorder, FancyBorder将props.children渲染在一个div中*/}
            {props.children}
        </div>
    );
}
function WelcomeDialog1() {
    return (
        <FancyBorder color="blue">
            <h1 className="Dialog-title">
                Welcome
            </h1>
            <p className="Dialog-message">
                Thank you for visiting our spacecraft!
            </p>
        </FancyBorder>
    );
}

// 特例关系 - 特殊组件可以通过props定制并渲染普通组件
function Dialog(props) {
    return (
        <FancyBorder color={props.color}>
            <h1 className="Dialog-title">
                {props.title}
            </h1>
            <p className="Dialog-message">
                {props.message}
            </p>
            {props.children}
        </FancyBorder>
    );
}
// function形式实现组合
function WelcomeDialog2(props) {
    return (
        <Dialog
            color="pink"
            title="Welcome!"
            message="Thank you for visiting our spacecraft!"
        />
    );
}
// class形式实现组合
class SignUpDialog extends React.Component {
    constructor(props) {
        super(props);
        this.state = { login: '' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSignUp = this.handleSignUp.bind(this);
    }
    handleChange(e) {
        this.setState({ login: e.target.value });
    }
    handleSignUp(e) {
        alert(`Welcome ${this.state.login}`)
    }
    render() {
        return (
            <Dialog
                color="bfa"
                title="Mars Exploration Program"
                message="How should we refer to you?"
            >
                <input type="text" onChange={this.handleChange} />
                <button onClick={this.handleSignUp}>Sign Me Up!</button>
            </Dialog>
        );
    }
}




ReactDOM.render(
    // <WelcomeDialog1 />,
    // <WelcomeDialog2 />,
    <SignUpDialog />,
    document.getElementById('root')
);